<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
  <title>demo示例</title>
  <script>
    var px2rem = function () {
      var rootValue = 100 // 建议与postcss-plugin-px2rem选项rootValue的值相同
      var UIWidth = 750 // UI设计图的最大像素宽度
      var maxWidth = Infinity // 用于计算font-size的最大宽度
      var rate = Infinity // 锁定宽高比，若屏幕太宽，则按高度计算font-size，反之则按宽度计算。若取值false/undefined/null，则始终按宽度计算
      var docEl = document.documentElement
      var logicWidth

      var setHtmlFontSize = () => { // 设置根节点的font-size属性以适用rem布局
        logicWidth = docEl.clientWidth
        if (rate && docEl.clientWidth / docEl.clientHeight > rate) {
          logicWidth = docEl.clientHeight * rate
        }
        logicWidth = logicWidth > maxWidth ? maxWidth : logicWidth
        docEl.style.fontSize = logicWidth / (UIWidth / rootValue) + 'px'
      }

      setHtmlFontSize()
      window.addEventListener("resize", setHtmlFontSize, false) // 横竖屏切换事件
      return function (px) {
        return (px * (UIWidth / rootValue) / logicWidth)
      }
    }();
  </script>
  <style>
    @-webkit-keyframes clockwise-gooSE {
      to {
        transform: rotate(360deg)
      }
    }

    @keyframes clockwise-gooSE {
      to {
        transform: rotate(360deg)
      }
    }

    @-webkit-keyframes anticlock-22Uc6 {
      to {
        transform: rotate(-360deg)
      }
    }

    @keyframes anticlock-22Uc6 {
      to {
        transform: rotate(-360deg)
      }
    }

    #loading {
      position: fixed;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      background: #000;
      z-index: 19860601;
    }

    #loading .wrapper {
      position: absolute;
      width: 3.8rem;
      height: 0.7rem;
      margin: auto;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
    }

    #loading .outer {
      position: absolute;
      width: 3.8rem;
      height: 0.7rem;
      -webkit-animation: clockwise-gooSE 4s linear infinite;
      animation: clockwise-gooSE 4s linear infinite;
    }

    #loading .inner {
      position: absolute;
      width: 1.8rem;
      height: 0.6rem;
      left: 1rem;
      top: 0.05rem;
      -webkit-animation: anticlock-22Uc6 4s linear infinite;
      animation: anticlock-22Uc6 4s linear infinite;
    }

    #loading .handle {
      position: absolute;
      width: 100%;
      height: 100%;
    }

    #loading .handle:before,
    #loading .handle:after {
      content: '';
      float: left;
      width: 0.7rem;
      height: 100%;
      border-radius: 50%;
      background: #fff;
    }

    #loading .handle:after {
      float: right;
    }

    #loading .inner>.handle:before,
    #loading .inner>.handle:after {
      width: 0.6rem;
    }

    #loading .rotate45 {
      transform: rotate(45deg)
    }

    #loading .rotate90 {
      transform: rotate(90deg)
    }

    #loading .rotate135 {
      transform: rotate(135deg)
    }
  </style>
  <script src="jquery.min.js"></script>
</head>

<body>
  <div id="loading">
    <div class="wrapper">
      <div class="outer">
        <div class="handle"></div>
        <div class="handle rotate45"></div>
        <div class="handle rotate90"></div>
        <div class="handle rotate135"></div>
      </div>
      <div class="inner">
        <div class="handle"></div>
        <div class="handle rotate90"></div>
      </div>
    </div>
  </div>
</body>

</html>